<template>
  <div id="contsainer"></div>
</template>
<script>
// import * as Cesium from 'cesium/Cesium'
export default {
  data() {
    return {
      viewer: null
    }
  },
  mounted() {
    this.viewer = this.initCesium()
    this.addBox(this.viewer)
  },
  methods: {
    initCesium() {
      Cesium.Ion.defaultAccessToken =
        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZjg4ZjljZC1mZGM3LTRlZjEtYjg3MC00MjZkNGU3YjI5ZWUiLCJpZCI6MTU5NTIsImlhdCI6MTYwNTE0ODM5OX0.LjxeKrgAo7Ksk8405kSAhYwF0nKcF2w2DGJnKHh51N8'
      let viewer = new Cesium.Viewer('contsainer', {
        animation: true,
        baseLayerPicker: true,
        fullscreenButton: true,
        geocoder: true,
        homeButton: true,
        infoBox: true,
        sceneModePicker: true,
        navigationHelpButton: true,
        scene3DOnly: true,
        timeline: true,
        selectionIndicator: false, //是否显示选取指示器组件
        shouldAnimate: false, //自动播放动画控件
        shadows: true, //是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, //地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D,
        clock: new Cesium.Clock(),
        // imageryProvider: new Cesium.UrlTemplateImageryProvider({ url: 'http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali' }),
        terrainProvider: new Cesium.EllipsoidTerrainProvider()
      })
      viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
      return viewer
    },
    addBox(viewer) {
      let blueBox = viewer.entities.add({
        name: 'blue box',
        position: Cesium.Cartesian3.fromDegrees(-114.2, 40.3, 6000),
        box: {
          dimensions: new Cesium.Cartesian3(400000.0, 30000.0, 50000.0),
          material: Cesium.Color.BLUE,
          heightReference: Cesium.HeightReference.NONE
        }
      })
      let redBox = viewer.entities.add({
        name: 'Red box with black outline',
        position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
        box: {
          // X     Y     Z  ==>Cartesian3(4000000.0, 300000.0, 50000.0)
          dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
          material: Cesium.Color.RED.withAlpha(0.5),
          heightReference: Cesium.HeightReference.NONE,
          outline: true,
          outlineColor: Cesium.Color.YELLOW
        }
      })
      let outlineOnly = viewer.entities.add({
        name: 'Yellow box outline',
        position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
        box: {
          dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
          fill: false,
          outline: true,
          outlineColor: Cesium.Color.YELLOW,
          heightReference: Cesium.HeightReference.NONE
        }
      })

      viewer.zoomTo(viewer.entities)
    }
  }
}
</script>
<style scoped>
#contsainer {
  height: 100%;
  width: 100%;
  background-color: red;
}
</style>
